<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box">
            <div class="advance_set">
                <div class="tittle">审批设置</div>
                <el-divider />
                <div class="content">
                    <el-form ref="ruleFormRef" :model="advanceForm" :rules="rules" @submit.prevent>
                        <div class="item_title"><span class="title_icon"></span>一级审核</div>
                        <el-form-item label="审核人员" prop="first_work_user">
                            <ZWSelectDepart
                                v-model="advanceForm.first_work_user"
                                :creators="first_user"
                                :disabled-list="advanceForm.second_work_user"
                                multiple />
                        </el-form-item>
                        <div class="item_title"><span class="title_icon"></span>二级审核</div>
                        <el-form-item label="审核人员">
                            <el-switch v-model="advanceForm.second_switch"></el-switch>
                        </el-form-item>
                        <el-form-item v-if="advanceForm.second_switch" prop="second_work_user">
                            <ZWSelectDepart
                                v-model="advanceForm.second_work_user"
                                :creators="second_user"
                                :disabled-list="advanceForm.first_work_user"
                                multiple />
                        </el-form-item>
                    </el-form>
                    <div class="save-btn">
                        <el-button type="primary" @click="save">保存</el-button>
                    </div>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script lang="ts" setup>
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import router from '@/router';
import { getSetionId } from '@/utils/utils';
import ZWSelectDepart from '@/components/ZWSelectDepart.vue';
import { ref, reactive, computed, onActivated, onMounted, onUnmounted } from 'vue';
import { getSetting, setSetting } from '@/api/salesleads/contractmanagement/contract';
const advanceForm = reactive({
    first_switch: 1,
    first_work_user: [],
    second_switch: false,
    second_work_user: []
});
const first_user = ref([]);
const second_user = ref([]);
const firstUserValid = (rule: any, value: any, callback: any) => {
    if (value == '') {
        callback(new Error('请选择一级审核审核人员'));
    } else {
        callback();
    }
};
const secondUserValid = (rule: any, value: any, callback: any) => {
    if (advanceForm.second_switch) {
        if (value == '') {
            callback(new Error('请选择二级审核审核人员'));
        } else {
            callback();
        }
    } else {
        callback();
    }
};
const ruleFormRef = ref<FormInstance>();
// 表单验证规则
const rules = reactive<FormRules>({
    first_work_user: [{ required: true, validator: firstUserValid, trigger: 'change' }],
    second_work_user: [{ required: true, validator: secondUserValid, trigger: 'change' }]
});
const save = () => {
    ruleFormRef.value.validate((valid: any) => {
        if (valid) {
            advanceForm.second_switch ? (advanceForm.second_switch = 1) : (advanceForm.second_switch = 2);
            setSetting(advanceForm).then((res: any) => {
                if (res) {
                    ElMessage.success('设置成功！');
                    router.go(-1);
                }
            });
        }
    });
};
const getDetail = () => {
    getSetting().then((res: any) => {
        first_user.value = res.first_work_user;
        second_user.value = res.second_work_user;
        advanceForm.first_work_user = getSetionId('id', res.first_work_user);
        advanceForm.second_switch = res.second_switch == 1 ? true : false;
        advanceForm.second_work_user = getSetionId('id', res.second_work_user);
    });
};
onMounted(() => {
    getDetail();
});
</script>
<style lang="scss" scoped>
.advance_set {
    padding: 24px;
}

.tittle {
    font-size: 16px;
    font-weight: 500;
    color: #33302d;
    line-height: 14px;
}

.content {
    padding: 0 24px 24px;

    .item_title {
        font-size: 14px;
        line-height: 1.125rem;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #33302d;
        margin-bottom: 8px;

        .title_icon {
            display: block;
            height: 1.125rem;
            width: 0.1875rem;
            background: #ff6b00;
            float: left;
            margin-left: -0.9375rem;
        }
    }
}

.save-btn {
    margin: 25px 0;
}
</style>
